<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { FormRules, FormInstance, CascaderOption } from "element-plus";
import { formatTree } from "@/utils/filters";
import { RouterConfigAPI } from "@/Api";

interface Props {
   modelValue: boolean;
   routerTree?: RouterConfig.Table[];
}

const props = withDefaults(defineProps<Props>(), {
   modelValue: false
});

const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void;
}>();

const dialogVisible = computed({
   get: () => props.modelValue,
   set: value => {
      if (!value) formRef.value?.resetFields();
      emit("update:modelValue", value);
   }
});
const options = computed(() => {
   const tree = formatTree<CascaderOption>(props.routerTree, {
      value: "id",
      label: "meta_label"
   });
   tree?.unshift({
      label: "顶级菜单",
      value: "*"
   });

   return tree;
});

const loading = reactive({ add: false, table: false });
const disable = reactive({ add: false, component: true });
const formRef = ref<FormInstance>();

const form = reactive<RouterConfig.Create>({
   parent_id: "*",
   meta_label: "",
   meta_icon: "",
   path: "",
   name: "",
   component: "layout/index"
});

const formRules = reactive<FormRules>({
   meta_label: [{ required: true, message: "显示名称必填", trigger: "blur" }],
   path: [{ required: true, message: "路由地址必填", trigger: "blur" }],
   component: [{ required: true, message: "组件路径必填", trigger: "blur" }],
   parent_id: [{ required: true, message: "上级菜单必填", trigger: "blur" }]
});

/** 弹窗打开时 */
async function handlerOpen() {
   form.parent_id = "*";
   form.component = "layout/index";
   disable.component = true;
}

async function handlerAdd(formRef?: FormInstance) {
   if (!formRef) return;
   formRef.validate(async (valid, fields) => {
      if (!valid) return;
      try {
         const params: RouterConfig.Create = {
            ...form,
            parent_id: form.parent_id == "*" ? "" : form.parent_id,
            component: `views/${form.component}.vue`
         };

         const { code } = await RouterConfigAPI.Create(params);
         if (code == 200) {
            ElMessage.success("添加成功");
            dialogVisible.value = false;
         }
      } catch (error) {
         console.log("error", error);
      }
   });
}

function parentChange(value: string) {
   if (value == "*") {
      disable.component = true;
      form.component = "layout/index";
   } else {
      disable.component = false;
      form.component = "";
   }
}
</script>

<template>
   <el-dialog
      v-model="dialogVisible"
      ref="dialog"
      title="添加路由信息"
      width="500px"
      draggable
      append-to-body
      @open="handlerOpen">
      <el-form ref="formRef" :model="form" :rules="formRules" label-width="85">
         <el-form-item label="上级菜单" prop="parent_id">
            <!-- <el-cascader v-model="form.parent_id" :options="options" filterable clearable :props="{ checkStrictly: true }" /> -->
            <el-select v-model="form.parent_id" @change="parentChange" placeholder="请选择上级菜单" style="width: 100%">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value || ''" />
            </el-select>
         </el-form-item>
         <el-form-item label="显示名称" prop="meta_label"> <el-input v-model="form.meta_label" /> </el-form-item>
         <el-form-item label="路由名称" prop="name"> <el-input v-model="form.name" /> </el-form-item>
         <el-form-item label="路由地址" prop="path"> <el-input v-model="form.path" /> </el-form-item>
         <el-form-item label="组件路径" prop="component">
            <el-input v-model="form.component" :disabled="disable.component">
               <template #prepend>views/</template>
               <template #append>.vue</template>
            </el-input>
         </el-form-item>
         <el-form-item label="显示图标" prop="meta_icon"> <el-input v-model="form.meta_icon" /> </el-form-item>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
            <el-button :loading="loading.add" :disabled="disable.add" type="primary" @click="handlerAdd(formRef)">
               添加
            </el-button>
         </span>
      </template>
   </el-dialog>
</template>

<style lang="scss" scoped>
.el-form {
   box-sizing: border-box;
   padding-inline: 20px;
}
.el-input {
   width: 100%;
}
</style>
